<template lang="">
   <div>
       <van-nav-bar title="居民列表" />
       <van-search  placeholder="请输入姓名/电话" />
        <div class="top-list">
            <div class="top-item">未签约居民</div>
            <div class="top-item" @click="goToTag">标签</div>
            <div class="top-item">群发信息</div>
        </div>
       <van-index-bar class="list">
         <view class="item">
            <van-index-anchor index="A" />
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
         </view>

         <view class="item">
            <van-index-anchor index="B" />
            <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
             <div class="family" @click="goToDetail">
               <van-image round width="4rem" height="4rem" 
               src="/static/img/girl.png" class="img" />
               <div>
                  <div class="family-top">
                     <div class="name">姓名</div> 
                     <div class="age">15岁</div> 
                     <div></div>
                  </div>
                  <div class="tag-list">
                     <div class="tag">发育不良</div>
                     <div class="tag">贫血</div>
                     <div class="tag">高血脂</div>
                  </div>
               </div>
             </div>
         </view>
         </van-index-bar>

         <van-tabbar v-model="active" @change="onTabChange">
            <van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
            <van-tabbar-item name="family" icon="friends-o">居民</van-tabbar-item>
            <van-tabbar-item name="message" icon="chat-o">消息</van-tabbar-item>
            <van-tabbar-item name="user" icon="contact-o">我的</van-tabbar-item>
        </van-tabbar>
   </div>
</template>
<script>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getItem, getItemCate, addItemCate } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
   setup() {
      const router = useRouter()
      const route = useRoute()
      const userInfo = getUserInfo();
      const active = ref("family");
      const onTabChange = (name) => {
         if (name == "home") {
            router.push("/Index")
         }
         if (name == "message") {
            router.push("/Message")
         }
         if (name == "user") {
            router.push("/User")
         }
      }
      const goToDetail = (id) => {
         router.push("/DangAnDetail")
      }
      const goToTag= () => {
         router.push("/Tag")
      }
      return {
         active,
         onTabChange,
         goToDetail,
         goToTag  
      }
   }
}
</script>
<style scoped>
.list {
   background: #F5F7FB;
   margin-bottom: 7 0px;
}

.top-list {
   padding: 12px;
   font-size: 18px;
   color: #1C2023;
   font-weight: 250;
}

.top-item {
   margin-bottom: 10px;
}

.family {
   background: #FFFFFF;
   padding: 12px;

   display: flex;
   flex-direction: row;
   align-items: center;
}

.img {
   margin-right: 15px;
}

.family-top {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.name {
   font-size: 17px;
   margin-right: 10px;
   color: #1C2023;
   font-weight: 250;
}

.age {
   font-size: 14px;

}

.tag-list {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
}

.tag {
   border: 1px solid #49B9AD;
   background: #EAFEFA;
   border-radius: 10px;
   padding: 2px 8px;
   margin-right: 10px;
   font-size: 13px;
}
</style>